<template>
  <div class="title-personnel-page">
    <!-- 标题 -->
    <div class="page-title">职称情况</div>

    <!-- 内容区域 -->
    <div class="content-box">
      <!-- 环形图 -->
      <div class="chart-container">
        <div id="personnelChart" class="chart"></div>
      </div>

      <!-- 统计信息 -->
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-header">
            <div
              class="stat-icon"
              style="
                background: #588fff;
                box-shadow: inset 0px 0px 4px 0px #fff1a7;
              "
            ></div>
            <div class="stat-label">在编人数</div>
          </div>
          <div class="stat-values">
            <div class="stat-left">
              <span class="stat-number">{{
                chartData?.titleDataOne || 0
              }}</span>
              <span class="stat-unit">人</span>
            </div>
            <div class="stat-right">
              <span class="stat-percent"
                >{{
                  chartData && chartData.totalOperator
                    ? Math.round(
                        (chartData.titleDataOne / chartData.totalOperator) * 100
                      )
                    : 0
                }}%</span
              >
            </div>
          </div>
        </div>

        <div class="stat-item">
          <div class="stat-header">
            <div
              class="stat-icon"
              style="
                background: #ff9018;
                box-shadow: inset 0px 0px 4px 0px #a7e8ff;
              "
            ></div>
            <div class="stat-label">临时工</div>
          </div>
          <div class="stat-values">
            <div class="stat-left">
              <span class="stat-number">{{
                chartData?.titleDataTwo || 0
              }}</span>
              <span class="stat-unit">人</span>
            </div>
            <div class="stat-right">
              <span class="stat-percent"
                >{{
                  chartData && chartData.totalOperator
                    ? Math.round(
                        (chartData.titleDataTwo / chartData.totalOperator) * 100
                      )
                    : 0
                }}%</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 柱状图区域 -->
    <div class="chart-box">
      <div id="titleChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import { termite } from "@/api";
import * as echarts from "echarts";
export default {
  name: "titlePersonnel",
  props: {
    controlId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chartInstance: null,
      barChartInstance: null,
      chartData: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 只调用接口，接口返回后会自动初始化图表
      this.getPreventionControlOperatorQuery();
    });
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    if (this.barChartInstance) {
      this.barChartInstance.dispose();
    }
  },
  methods: {
    getPreventionControlOperatorQuery() {
      termite
        .getPreventionControlOperatorQuery({
          controlId: this.controlId,
        })
        .then((res) => {
          console.log(res, "职称数据");
          if (res.errorCode === "000000") {
            this.chartData = res.data;
            // 数据加载完成后更新图表
            this.initChart();
            this.initBarChart();
          }
        });
    },
    initChart() {
      const chartDom = document.getElementById("personnelChart");
      if (!chartDom) return;

      if (!this.chartInstance) {
        this.chartInstance = echarts.init(chartDom);
      }

      // 使用接口数据或默认值
      const titleDataOne = this.chartData?.titleDataOne || 0;
      const titleDataTwo = this.chartData?.titleDataTwo || 0;
      const totalOperator = this.chartData?.totalOperator || 0;

      const option = {
        color: ["#588FFF", "#FF9018", "#5AD8A6"],
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              formatter: () => {
                return `{value|${totalOperator}}\n{label|总人数(人)}`;
              },
              rich: {
                value: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "#333",
                  lineHeight: 40,
                },
                label: {
                  fontSize: 12,
                  color: "#999",
                  lineHeight: 18,
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 32,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: titleDataOne,
                name: "在编人数",
                // itemStyle: {
                //   color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                //     { offset: 0.6, color: "#B3D9FF" },
                //     { offset: 0.7, color: "#588FFF" },
                //     { offset: 0.8, color: "#B3D9FF" },
                //   ]),
                //   shadowColor: "rgba(255, 255, 255, 0.8)",
                //   shadowBlur: 10,
                //   shadowOffsetX: 0,
                //   shadowOffsetY: 0,
                // },
              },
              {
                value: titleDataTwo,
                name: "临时工",
                // itemStyle: {
                //   color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                //     { offset: 0.6, color: "#FFBB8A" },
                //     { offset: 0.7, color: "#FF874D" },
                //     { offset: 0.8, color: "#FFBB8A" },
                //   ]),
                //   shadowColor: "rgba(255, 255, 255, 0.8)",
                //   shadowBlur: 10,
                //   shadowOffsetX: 0,
                //   shadowOffsetY: 0,
                // },
              },
            ],
          },
        ],
      };

      this.chartInstance.setOption(option);
    },
    initBarChart() {
      const chartDom = document.getElementById("titleChart");
      if (!chartDom) return;

      if (!this.barChartInstance) {
        this.barChartInstance = echarts.init(chartDom);
      }

      // 使用接口数据或默认值
      const data = this.chartData || {};
      const technicianJunior = data.titleTypeOneJunior || 0; // 技工初级
      const technicianMiddle = data.titleTypeOneMiddle || 0; // 技工中级
      const technicianHigh = data.titleTypeOneHigh || 0; // 技工高级
      const technicalJunior = data.titleTypeOTwoJunior || 0; // 技术初级
      const technicalMiddle = data.titleTypeOTwoMiddle || 0; // 技术中级
      const technicalHigh = data.titleTypeOTwoHigh || 0; // 技术高级

      const option = {
        color: ["#FF9845", "#73A5F6"],
        legend: {
          data: ["技工人员", "技术人员"],
          top: 10,
          right: 20,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: 13,
            color: "#666",
          },
        },
        grid: {
          left: 40,
          right: 20,
          top: 50,
          bottom: 30,
          containLabel: false,
        },
        xAxis: {
          type: "category",
          data: ["初级职称", "中级职称", "高级职称"],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
            fontSize: 13,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E5E5E5",
            },
          },
          axisLabel: {
            color: "#999",
            fontSize: 12,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "技工人员",
            type: "bar",
            barWidth: 16,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FF874D" },
                { offset: 1, color: "#FFC041" },
              ]),
            },
            data: [technicianJunior, technicianMiddle, technicianHigh],
          },
          {
            name: "技术人员",
            type: "bar",
            barWidth: 16,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#73A5F6" },
                { offset: 1, color: "#ABE4FF" },
              ]),
            },
            data: [technicalJunior, technicalMiddle, technicalHigh],
          },
        ],
      };

      this.barChartInstance.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.title-personnel-page {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100%;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid #1890ff;
    line-height: 1.4;
  }

  .content-box {
    background: #fff;
    border-radius: 8px;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    .chart-container {
      flex-shrink: 0;
      width: 160px;
      height: 160px;

      .chart {
        width: 100%;
        height: 100%;
      }
    }

    .stats-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;

      .stat-item {
        background: linear-gradient(180deg, #dcebff 0%, #ffffff 100%);
        border-radius: 5px;
        padding: 14px 16px;

        .stat-header {
          display: flex;
          align-items: center;
          gap: 6px;
          margin-bottom: 8px;

          .stat-icon {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            flex-shrink: 0;
          }

          .stat-label {
            font-size: 13px;
            color: #999;
          }
        }

        .stat-values {
          display: flex;
          align-items: baseline;
          justify-content: space-between;

          .stat-left {
            display: flex;
            align-items: baseline;
            gap: 4px;

            .stat-number {
              font-size: 16px;
              font-weight: 600;
              color: #333;
              line-height: 1;
            }

            .stat-unit {
              font-size: 12px;
              color: #666;
            }
          }

          .stat-right {
            display: flex;
            .stat-percent {
              font-size: 16px;
              font-weight: 600;
              color: #333;
              line-height: 1;
            }
          }
        }
      }
    }
  }

  .chart-box {
    background: #fff;
    border-radius: 8px;
    padding: 16px 12px;
    height: 400px;
    margin-top: 16px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
